import React from 'react';
import styles from '../index.less';
import { useModel } from 'umi';
import { Carousel, Tabs } from 'antd';
import { history } from 'umi';
// import LazyImage from 'animated-lazy-image';
// import 'antd/dist/antd.css';
import { useState, useEffect } from 'react';
export default () => {
  const { TabPane } = Tabs;
  function callback(key: any) {
    console.log(key);
  }
  let [list, setList] = useState([]);
  let [banner, setBanner] = useState([]);
  let [channel, setChannel] = useState([]);
  let [newGoodsList, setNewGoodsList] = useState([]);
  let [hotGoodsList, setHotGoodsList] = useState([]);
  let [brandList, setBrandList] = useState([]);
  let [categoryList, setCategoryList] = useState([]);
  let [topicList, setTopicList] = useState([]);
  let { homeData } = useModel('home', model => ({ homeData: model.homeData }));
  async function getList() {
    let result = await homeData();
    setList(result.data); //总数据
    setBanner(result.data.banner); //banner
    setChannel(result.data.channel); //nav数据
    setNewGoodsList(result.data.newGoodsList); //新品首发
    setHotGoodsList(result.data.hotGoodsList); //人气推荐
    setBrandList(result.data.brandList); //品牌制造商
    setCategoryList(result.data.categoryList); //切换数据
    setTopicList(result.data.topicList); //专题精选
  }
  useEffect(() => {
    getList();
  }, [homeData]);
  return (
    <div className={styles.home}>
      <div className={styles.banner}>
        <Carousel autoplay>
          {banner.map((item: any) => {
            return <img src={item.image_url} key={item.id} />;
          })}
        </Carousel>
      </div>
      {/* 居家 */}
      <div className={styles.channel}>
        {channel.map((item: any) => {
          return (
            <dl
              key={item.id}
              onClick={() => {
                history.push(`/detail/${item.id}`);
              }}
            >
              <dt>
                {/* <LazyImage source={item.icon_url} /> */}
                <img src={item.icon_url} alt="" />
              </dt>
              <dd>{item.name}</dd>
            </dl>
          );
        })}
      </div>
      {/* 品牌制造商直供 */}
      <div className={styles.brandList}>
        <h3>品牌制造商直供</h3>
        <div className={styles.bl}>
          {brandList.map((item: any) => {
            return (
              <p
                key={item.id}
                onClick={() => {
                  history.push(`/brandDetail/${item.id}`);
                }}
              >
                <img src={item.new_pic_url} alt="" />
                <span>{item.name}</span>
                <span>￥{item.floor_price}元起</span>
              </p>
            );
          })}
        </div>
        {/* 新品首发 */}
        <div className={styles.newGoodsList}>
          <h3>新品首发</h3>
          <div className={styles.ng}>
            {newGoodsList.map((item: any) => {
              return (
                <dl
                  key={item.id}
                  onClick={() => {
                    history.push(`/goods/${item.id}`);
                  }}
                >
                  <dt>
                    <img src={item.list_pic_url} alt="" />
                  </dt>
                  <dd>{item.name}</dd>
                  <dd>￥{item.retail_price}</dd>
                </dl>
              );
            })}
          </div>
        </div>
      </div>
      {/* 人气推荐 */}
      <div className={styles.hotGoodsList}>
        <h3>人气推荐</h3>
        <div className={styles.hg}>
          {hotGoodsList.map((item: any) => {
            return (
              <dl
                key={item.id}
                onClick={() => {
                  history.push(`/goods/${item.id}`);
                }}
              >
                <dt>
                  <img src={item.list_pic_url} alt="" />
                </dt>
                <dd>
                  <p>{item.name}</p>
                  <p>{item.goods_brief}</p>
                  <p>￥{item.retail_price}</p>
                </dd>
              </dl>
            );
          })}
        </div>
      </div>
      {/* 专题精选 topicList */}

      <div className={styles.topicList}>
        <h3>专题精选</h3>
        <div className={styles.bn}>
          <Carousel autoplay dots={false}>
            {topicList.map((item: any) => {
              return (
                <dl
                  key={item.id}
                  onClick={() => {
                    history.push(`/topicDetail/${item.id}`);
                  }}
                >
                  <dt>
                    <img src={item.item_pic_url} alt="" />
                  </dt>
                  <dd>
                    <p>
                      <span>{item.title}</span>
                      <span>￥{item.price_info}元起</span>
                    </p>
                    <p>{item.subtitle}</p>
                  </dd>
                </dl>
              );
            })}
          </Carousel>
        </div>
      </div>
      {/* categoryList */}
      <div className={styles.all}>
        {categoryList.map((item: any) => {
          return (
            <div key={item.id} className={styles.one}>
              <h3>{item.name}</h3>
              <div className={styles.two}>
                {item.goodsList.map((ite: any) => {
                  return (
                    <dl
                      key={ite.id}
                      onClick={() => {
                        history.push(`/goods/${item.id}`);
                      }}
                    >
                      <dt>
                        <img src={ite.list_pic_url} alt="" />
                      </dt>
                      <dd>
                        <p>{ite.name}</p>
                        <p>{ite.goods_brief}</p>
                        <p>￥{ite.retail_price}</p>
                      </dd>
                    </dl>
                  );
                })}
                <dl
                  onClick={() => {
                    history.push(`/detail/${item.id}`);
                  }}
                >
                  <dd>更多餐厨好物</dd>
                  <dd>-&gt;</dd>
                </dl>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
